<template>
  <div class="app-container">
    <el-form :model="form" :rules="rules" label-width="120px" ref="specForm">
      <el-form-item label="名称" prop="title">
        <el-input v-model="form.title" style="width:220px"/>
      </el-form-item>

      <el-form-item label="关联规格" prop="explain">
         <el-checkbox-group v-model="form.spec">
            <el-checkbox v-for="spec in form.spec_value" :label="spec.id" :key="spec.id">{{spec.title}}</el-checkbox>
          </el-checkbox-group>
      </el-form-item>

      <el-form-item v-for="(name) in form.attr_value" :key="name.key"  label="属性" :prop="name.title" >
          <el-col :span="2"> <el-input  size="medium" placeholder="排序" v-model="name.sort"></el-input></el-col>
          <el-col :span="3">
            <el-select v-model="name.type_desc" placeholder="选择类型" size="medium">
              <el-option  v-for="item in attr_type" :label="item.desc" :value="item.id" :key="item.key"> </el-option>
            </el-select>
          </el-col>
          <el-col :span="3"><el-input  size="medium" placeholder="属性名" v-model="name.title"></el-input></el-col>
          <el-col :span="3">
            <el-input
              type="textarea"
              size="medium"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入属性值 ,分隔"
              v-model="name.value">
            </el-input>
          </el-col>

          <el-col :span="2">
            <el-button @click.prevent="removeName(name)"  size="medium">删除</el-button>
          </el-col>
        </el-form-item>
      <el-form-item>
          <el-button @click="addName" size="mini" icon="el-icon-plus">新增属性</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit('specForm')">提 交</el-button>
        <el-button @click="onCancel()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {createBaseAttr,updateBaseAttr,detailBaseAttr} from '@/api/goods/baseAttr'
  import {fetchList} from '@/api/goods/baseSpec'
export default {
  data() {
    return {
      form: {
        id:0,
        title: '',
        spec_ids: '',
        attr_value: [],
        spec:[],
        spec_value:[],
      },
      rules:{
        title:[{required: true, message: '名称不能为空', trigger: 'blur' }],
      },
      attr_type:[
        {id:'1',desc:'输入框'},
        {id:'2',desc:'单选项'},
        {id:'3',desc:'多选项'},
      ],
      type_desc:{"1":'输入框',"2":'单选项',"3":'多选项'}
    }
  },
  beforeMount() {
    let id = this.$route.params.id || 0;
    if(id > 0){
      detailBaseAttr(id).then(response => {
        this.form = response.data
        let _spec_name = [];
        response.data.attr_value.map(v=>{
          _spec_name.push({id:v.id,value:v.value,title:v.title,sort:v.sort,key:v.id,type:v.type,type_desc:this.type_desc[v.type]})
        })
        this.form.attr_value = _spec_name;

        

      })
    }

    fetchList({page:1,size:1000}).then(response=>{
      this.form.spec_value = response.data.data
      if(id > 0){
        let _ids = this.form.spec_ids.split(',')
        _ids = _ids.map(Number)
        this.form.spec=_ids
      }
    })
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid)=>{
        if (valid) {
          if(!this.checkSpec()) return false;

          let id = this.$route.params.id || 0;
          if(id > 0){
            this.form.spec_ids=this.form.spec.join(',')
            updateBaseAttr(this.form).then(response => {
              if(response.code == 200){
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                setTimeout(()=>{
                  this.$router.push({name:'baseAttr'});
                }, 200)
              }
            })
          }else{
            this.form.spec_ids=this.form.spec.join(',')
            createBaseAttr(this.form).then(response => {
              if(response.code == 200){
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                setTimeout(()=>{
                  this.$router.push({name:'baseAttr'});
                }, 200)
              }
            })
          }
        }
      })
    },
    checkSpec(){
      let _spec_name = this.form.attr_value

      if(_spec_name.length > 0){
        let _name = []
        let _empty = false
        _spec_name.map(v=>{
          _name.push(v.title);
          if(v.type != 1 && v.value == ''){_empty = true}
          if(v.title == '' || !v.title ||  v.sort == ''){_empty = true}
        })

        if(_name.length < 1 || _empty){
          this.$message({
            message: '属性参数不完整',
            type: 'warning'
          })
          return false;
        }

        return true;
      }
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    addName() {
      this.form.attr_value.push({
        id:0,
        value: '',
        title: '',
        sort: '',
        type: 1,
        type_desc: '输入框',
        key: Date.now()
      });
    },
    removeName(item) {
      var index = this.form.attr_value.indexOf(item)
      if (index !== -1) {
        this.form.attr_value.splice(index, 1)
      }
    },
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
.el-col{margin-right: 0.75rem;}
  .app-container {
  background: #fff;
  margin-top: 18px;
  height: 100%;
  min-height: calc(100vh - 68px);
  font-size: 12px
}

.app-container * {
  font-size: 12px;
}
</style>
